import ExaminationImg from '@/img/examination.png';
import floderImg from '@/img/folder.png';
import graphicCourseWareImg from '@/img/graphicCourseWare.png';
import pcfloderImg from '@/img/pcfolder.png';
import pdfCourseWareImg from '@/img/pdfCourseWare.png';
import videoCourseWareImg from '@/img/videoCourseWare.png';
import React, { useMemo } from 'react';
import OStyle from './index.less';
import type { IResourceNameParam } from './interface';

export enum EResourceType {
  'videoCourseWare' = videoCourseWareImg, // 视频课件
  'graphicCourseWare' = graphicCourseWareImg, //图文课件
  'pdfCourseWare' = pdfCourseWareImg, // pdf课件
  'sChoiceQue' = ExaminationImg, // 单选题
  'mChoiceQue' = ExaminationImg, //多选题
  'judgeQue' = ExaminationImg, //判断题
  'courseWarePack' = '', //课件包
  'planTemplate' = '', //计划模板
  'testPaper' = ExaminationImg, //试卷
}

const ResourceNameForTable: React.FC<IResourceNameParam> = (props) => {
  const { title, resourceFrom, resourceType, canPointer, imgWidth = 40, imgHeight = 40 } = props;

  const imgName = useMemo(() => {
    if (resourceType === 1) {
      //目录
      if (process.env.processEnvDetail.REACT_APP_PLATFORM === 'boss') {
        return floderImg;
      } else {
        return pcfloderImg;
      }
    } else {
      // 0 文件
      return EResourceType[resourceFrom];
    }
  }, [resourceType, resourceFrom]);

  return (
    <div
      className={OStyle.table_resource_name}
      style={{
        cursor: resourceType === 1 || canPointer ? 'pointer' : 'default',
        color: resourceType === 1 ? '#3E84E9' : undefined,
      }}
    >
      {imgName ? (
        <img src={imgName} alt="文件图标" width={imgWidth} height={imgHeight} style={{ marginRight: 12 }} />
      ) : null}
      <span>{title}</span>
    </div>
  );
};

export default ResourceNameForTable;
